<!--个人信息编辑-->
<template>
  <div class="content">
      <div class="detailItem">
        <p>我的头像</p>
        <div class="detailBnt" @click="openImg">
          <div class="imgUrl">
            <img :src="tempFilePaths" alt="" width="100%" height="100%">
          </div>
          <div class="icon"></div>
        </div>
      </div>
      <div class="detailItem">
        <p>昵称</p>
        <div class="detailBnt">
          <input class="text" placeholder="吧啦啦啦啦"/>
          <div class="icon"></div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  // onLoad: function (options) {
  //   console.log(options)
  // },
  data () {
    return {
      tempFilePaths: '../../../../static/img/defaultImg.png'
    }
  },
  onShow () {
    wx.setNavigationBarTitle({
      title: '个人中心编辑'
    })
  },
  methods: {
    openImg () {
      let _this = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          _this.tempFilePaths = res.tempFilePaths
        }
      })
    }
  }
}
</script>

<style scoped>
.detailItem{
  line-height: 94rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin: 10rpx 0;
}
.detailItem p{
  font-size: 28rpx;
}
.detailBnt{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.imgUrl{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  /*background-color: dimgray;*/
  margin-right: 20rpx;
  overflow: hidden;
}
.imgUrl img{
  width: 100%;
  height: 100%;
}
.icon{
  width: 21rpx;
  height: 35rpx;
  background: url("~static/img/right.png") no-repeat center/cover;
}
.text{
  color: #bfbfbf;
  font-size: 24rpx;
  margin-right: 20rpx;
  text-align: right;
}
.content{
  display: block;
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  position: fixed;
}
</style>
